#file-diff {
    padding: 15px;
    box-sizing: border-box;

    > .loading {
        height: 50px;
        background: url('loader.gif') no-repeat center center;
    }

    .diff-file-title {
        display: flex;
        justify-content: space-between;
        margin: 0 0 10px;

        h3 {
            display: inline-block;
            margin: 0;
            line-height: normal;

            > i {
                margin: 0 3px 0 1px;
            }
        }

        .file-diff-nav-links {
            a {
                &:first-child {
                    margin: 0 20px 0 0;
                }

                &.disabled {
                    display: none;
                }
            }
        }
    }

    .binary-file {
        padding: 100px;
        border: 1px solid #dddddd;
        border-radius: 3px;
        color: #cccccc;
        text-align: center;
        line-height: 40px;

        > i {
            font-size: 40px;
        }
    }

    #code-mirror-area {
        height: 50vh;
    }

    .CodeMirror {
        border: 1px solid #dddddd;
        border-radius: 3px;
        height: 400px;

        .CodeMirror-gutters {
            border: 0;
        }

        .CodeMirror-gutter {
            min-width: 30px;
            background: #fdfdfd;
            border-right: 1px solid #f6f6f6;
        }

        .CodeMirror-lines {
            font-size: 13px;
            line-height: 20px;

            .CodeMirror-gutter-elt {
                color: #8c8c8c;
                font-size: 11px;
                text-align: center;

                &:hover {
                    background: #666666;
                    color: #ffffff;
                    font-weight: 600;
                    cursor: pointer;
                }
            }

            .added-lines {
                background-color: #eff8ef;

                + .CodeMirror-gutter-wrapper .CodeMirror-gutter-elt {
                    color: #58b359;
                }
            }

            .deleted-lines {
                background-color: #ffe6e6;

                + .CodeMirror-gutter-wrapper .CodeMirror-gutter-elt {
                    color: #da5353;
                }
            }

            .CodeMirror-gutter-wrapper:hover .CodeMirror-gutter-elt {
                background: #666666;
                color: #ffffff;
                font-weight: 600;
                cursor: pointer;
            }
        }

        @import 'inline-comment/inline-comment';

        .new-inline-comment {
            display: flex;
            align-items: center;
            margin: 3px 15px 3px 23px;

            .icon-plus-sign {
                margin: 0 11px 0 0;
                color: #1593c4;
                font-size: 18px;
            }

            .new-inline-comment-content {
                display: flex;
                flex: 1 1 auto;
                padding: 7px;
                background: #ffffff;
                border: 1px solid #eeeeee;
                border-radius: 3px;

                form {
                    flex: 1 1 auto;
                    margin: 0;

                    textarea {
                        width: 100%;
                        height: 43px;
                        box-sizing: border-box;
                        margin: 0;
                        font-size: 13px;
                    }
                }

                .controls {
                    display: flex;

                    > .btn {
                        max-height: 43px;
                        width: 50%;
                        min-width: 120px;
                        white-space: nowrap;

                        &:first-child {
                            margin: 0 5px 0;
                        }
                    }
                }
            }
        }

        .inline-comment .arrow,
        .new-inline-comment .arrow {
            flex: 0 0 auto;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px 5px 5px 0;
            border-color: transparent #eeeeee transparent transparent;
        }
    }
}
